import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, Popconfirm, message, Modal, Select, TreeSelect, Checkbox, Tabs, Tag, Popover, Upload, DatePicker } from 'antd'
import moment from 'moment'
import Edit from 'mixin/edit'
import { backUrl } from 'lib/fun'

const ButtonGroup = Button.Group;
const FormItem = Form.Item;
const SelectTreeNode = TreeSelect.TreeNode;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;

@Form.create()
@inject('appStore')
@observer
class ModuleName extends Edit {
  constructor(props) {
    super(props);
    this.state = Object.assign({
      listImg: '',
      coverImg: '',
      listImgVisible: false,
    }, this.state)
    this.api = {
      get: '/admin/experience/get',
      save: '/admin/experience/save',
      upload: '/admin/uploadimage'
    }
    this.itemKey = 'experienceId';
    this.contentKey = 'content';
  }

  msgCallback = (result)=>{
    this.setState({
      listImg: result.listImg,
      coverImg: result.coverImg
    });
    this.um&&this.um.setContent(result[this.contentKey])
  }
  checkData = (values)=>{
    const { listImg, coverImg } = this.state;
    this.other = {
      listImg,
      coverImg
    }
    return true;
  }
  reset = () => {
    this.setState({
      listImg: '',
      coverImg: ''
    });
  }

  handleChangeList = ({ fileList }) => {
    if(fileList&&fileList.length > 0&&fileList[fileList.length - 1].response){
      this.setState({
        listImg: fileList[fileList.length - 1].response.data[0]
      })
    }else{
      this.setState({
        listImg: ""
      })
    }
  }
  handleChangeCover = ({ fileList }) => {
    if(fileList&&fileList.length > 0&&fileList[fileList.length - 1].response){
      this.setState({
        coverImg: fileList[fileList.length - 1].response.data[0]
      })
    }else{
      this.setState({
        coverImg: ""
      })
    }
  }
  
  render() {
    const { visible, type } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout2 = {
      labelCol: { span: 12 },
      wrapperCol: { span: 12 },
    };
    const { msgData } = this.state;
    const { imgBaseUrl } = this.props.appStore;
    const { experienceTypeEn } = this.props.appStore.commonData;
    return (
      <Modal
        title={ type == 'edit'?"修改":"新建" }
        visible={visible}
        onOk={ this.handleCommit }
        onCancel={ this.onCancel }
        okText="确定"
        cancelText="取消"
        width="800px"
        maskClosable={false}
      >
        <Spin spinning={this.state.loading}>
          <Form>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="经验标题">
                  {getFieldDecorator("title",{
                    initialValue: type == 'edit'?msgData.title:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="经验分类">
                  {getFieldDecorator("categoryId",{
                    initialValue: type == 'edit'?`${msgData.categoryId}`:"",
                  })(
                    <Select size="default">
                      {
                        (experienceTypeEn||[]).map(item=>{
                          return <Option key={item.code}>{item.mean}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="阅读数量">
                  {getFieldDecorator("readCount",{
                    initialValue: type == 'edit'?msgData.readCount:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                  <FormItem {...formItemLayout} label="是否置顶">
                    {getFieldDecorator("top",{
                      initialValue: type == 'edit'?msgData.top:"",
                      valuePropName: 'checked'
                    })(
                      <Checkbox />
                    )}
                  </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="列表图">
                  <div>
                    <Upload
                      action={backUrl(this.api.upload)}
                      onChange={this.handleChangeList}
                      showUploadList={false}
                    >
                      <Button><Icon type="upload" /> 上传</Button>
                    </Upload>
                  </div>
                  {this.state.listImg ? <div>
                      <img style={{marginTop: 10, maxHeight: 50}} src={`${imgBaseUrl}${this.state.listImg}`} alt=""/>
                    </div> : ""}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="展示图">
                  <div>
                    <Upload
                      action={backUrl(this.api.upload)}
                      onChange={this.handleChangeCover}
                      showUploadList={false}
                    >
                      <Button><Icon type="upload" /> 上传</Button>
                    </Upload>
                  </div>
                  {this.state.coverImg ? <div>
                      <img style={{marginTop: 10, maxHeight: 50}} src={`${imgBaseUrl}${this.state.coverImg}`} alt=""/>
                  </div> : ""}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={20}>
              <Col span={22} offset={1}>
                <div id="ueditor" style={{height: 240}}></div>
              </Col>
            </Row>
          </Form>
        </Spin>
      </Modal>
    )
  }
}

module.exports = ModuleName
